<template>
<div class="NavList">
  <div class="navList-box">
    <span><img src="@/assets/images/nav-1.png" alt=""></span>

    <span>新鲜水果</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-2.png" alt=""></span>
    <span>时令鲜蔬</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-3.png" alt=""></span>
    <span>肉禽蛋品</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-4.png" alt=""></span>
    <span>水产海鲜</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-5.png" alt=""></span>
    <span>乳品烘焙</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-6.png" alt=""></span>

    <span>米面粮油</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-7.png" alt=""></span>
    <span>休闲零食</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-8.png" alt=""></span>
    <span>酒水饮料</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-9.png" alt=""></span>
    <span>日用百货</span>
  </div>
  <div class="navList-box">
    <span><img src="@/assets/images/nav-10.png" alt=""></span>
    <span>儿童玩具</span>
  </div>


</div>
</template>

<script>
export default {
  name: "FirstNavList"
}
</script>

<style scoped lang="scss">
.NavList{
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
  height: 160px;
  flex-wrap: wrap;
  .navList-box{
    width: 19%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text{
      //font-size: 12px;
    }

  }
  .navList-box img{
    width: 50px;
    height: 50px;
  }
}

</style>